<template>
  <div>

    <el-row :gutter="20">
      <el-col :span="12" :offset="1">
        <h3>环境变量说明</h3>
        <p>share: 为“true”表示开启屏蔽北上广深，若要关闭，删除或者设为“false”都可以</p>
        <p>prodVersion: 正式服版本号，如果发现版本号大于它，则关闭分享</p>
      </el-col>
    </el-row>

    <hr>
    <br>

    <el-row :gutter="20">
      <el-col :span="6" :offset="1">
        <el-button size="mini" @click="dialogFormVisible = true">新增</el-button>
      </el-col>
    </el-row>

    <br>
    <hr>

    <el-row :gutter="20">
      <el-col :span="24" :offset="1">
        <el-table :data="list" style="width: 100%">

          <el-table-column label="键" width="180">
            <template slot-scope="scope">
              {{ scope.row.key }}
            </template>
          </el-table-column>

          <el-table-column label="值" width="120">
            <template slot-scope="scope">
              {{ scope.row.val }}
            </template>
          </el-table-column>

          <el-table-column label="备注" width="380">
            <template slot-scope="scope">
              {{ scope.row.detail }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="dialogFormVisible" title="编辑环境变量">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="键">
          <el-input v-model="form.key" autocomplete="off"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="值">
          <el-input v-model="form.val" autocomplete="off"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注">
          <el-input v-model="form.detail" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateEnv">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="delDialogFormVisible" title="删除环境变量">
      <el-button type="primary" @click="delEnv">确认删除</el-button>
    </el-dialog>

  </div>
</template>

<script>
import { getEnv, setEnv } from '@/api/level'

export default {
  data() {
    return {
      list: [],
      dialogFormVisible: false,
      form: {
        key: '',
        val: '',
        detail: ''
      },
      formLabelWidth: '100px',
      delDialogFormVisible: false
    }
  },
  created() {
    this.renderEnv()
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
      this.form.key = row.key
      this.form.val = row.val
      this.form.detail = row.detail
      this.dialogFormVisible = true
    },
    updateEnv() {
      setEnv({
        key: this.form.key,
        val: this.form.val,
        detail: this.form.detail
      }).then(response => {
        this.$message('修改成功!')
        this.dialogFormVisible = false
        this.renderEnv()
        this.$forceUpdate()
      })
    },
    handleDelete(index, row) {
      console.log(index, row)
      this.form.key = row.key
      this.form.val = row.val
      this.form.detail = row.detail
      this.delDialogFormVisible = true
    },
    delEnv() {
      setEnv({
        key: this.form.key,
        val: this.form.val,
        detail: this.form.detail,
        del: true
      }).then(response => {
        this.$message('删除成功!')
        this.delDialogFormVisible = false
        this.renderEnv()
        this.$forceUpdate()
      })
    },
    renderEnv() {
      getEnv({ }).then(response => {
        this.list = response.data.list
      })
    }

  }
}
</script>
